<template>
  <tr>
    <td class="leftTd">
      <p class="index text fontColorTheme">4.</p>
      <p class="title text fontColorTheme">投保资料</p>
    </td>
    <td class="rightTd lastRightTd">
      <div class="titleBox">
        <div
          class="tabTitle"
          @click="changeIndex(item)"
          v-for="item in fileOptions"
          :key="item.id"
        >
          <div
            :class="currentIndex === item.id ? 'textBox textBoxCur' : 'textBox'"
          >
            <span class="mark" v-if="item.isUpload"
              ><span class="right">✔</span></span
            >
            <p class="nameTextBox">
              <span class="star nameText" v-if="item.prop">*</span>
              <span
                :class="
                  item.name.length > 9 ? 'nameText nameTextW' : 'nameText'
                "
                >{{ item.name }}</span
              >
            </p>
            <p class="error" v-if="item.prop && item.error">请上传相应附件</p>
          </div>
        </div>
      </div>
      <div class="fileBox">
        <div
          class="fileInfo"
          v-for="item in fileOptions"
          :key="item.id"
          v-show="currentIndex === item.id"
        >
          <p style="margin-bottom: 20px">{{ item.name }}</p>
          <div
            :class="item.name == '企业发票抬头（专票）' ? 'demo demos' : 'demo'"
            v-if="
              item.name == '工商营业执照' ||
              item.name == '资质等级证书' ||
              item.name == '项目施工合同' ||
              item.name == '企业发票抬头（专票）'
            "
          >
            <el-link type="primary" @click="lookDemo(item.name, item.id)"
              >查看示例</el-link
            >
            <el-image
              class="previewImg"
              style="width: 0; height: 0"
              :src="src"
              :preview-src-list="[src]"
              :id="`${item.id}`"
            ></el-image>
          </div>
          <div class="uploadBox">
            <el-button class="uploadImg commonBut"
              ><i class="icon iconfont iconshangchuan"></i>上传</el-button
            >
            <span class="uploadImgState"
              >附件格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，最多上传10个附件</span
            >
            <div class="upLoadDom">
              <form :id="`salaryExcelForm${item.id}`">
                <input
                  type="file"
                  :id="`salaryExcel${item.id}`"
                  name="file"
                  @change="fileChange(item.id)"
                />
              </form>
            </div>
          </div>
          <!-- <uploadAnnex @getFileList="getFileListLicense" :limitationFactor="limitationFactorLicense" @getFile="getFileLicense" :upLoadFile="upLoadFileLicense" /> -->
          <div v-for="(cvalue, ckey, cindex) in dataObject" :key="cindex">
            <uploadResult
              style="margin-top: 10px; margin-left: 0 !important"
              :resultList="cvalue"
              @callBackResult="getFileLicense"
              v-if="ckey == item.id"
              :id="item.id"
              :mark="'enclosure'"
            />
          </div>
        </div>
      </div>
    </td>
  </tr>
</template>

<script>
import common from '../../kits/common'

export default {
  name: 'enclosure',
  props: {
    fileOptions: {
      type: Array,
      default() {
        return []
      },
    },
    editUploadData: {
      type: Object,
      default: '',
    },
    type: {
      type: String,
    },
  },
  data() {
    return {
      currentIndex: '',
      currentName: '',
      src: '',
      upLoadFile: [],
      srcList: [],
      oldSrcList: [],
      newUploadFile: [],
      dataObject: {},
      mark: '',
    }
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.currentIndex = this.fileOptions[0].id
      this.currentName = this.fileOptions[0].name
      if (this.type === 'update' || this.type === 'renew') {
        this.fileOptions.forEach((v) => {
          var uploadId = '' + v.id
          this.$set(this.dataObject, uploadId, this.dataObject[uploadId])
          if (this.dataObject[uploadId] === undefined) {
            this.dataObject[uploadId] = []
          }
          this.dataObject[uploadId] = this.editUploadData[uploadId]
        })
      }
    })
  },
  methods: {
    lookDemo(currentName, currentIndex) {
      var name = ''
      if (currentName == '工商营业执照') {
        name = 'licenseDemo'
      } else if (currentName == '资质等级证书') {
        name = 'levelDemo'
      } else if (currentName == '项目施工合同') {
        name = 'contractDemo'
      } else if (currentName == '企业发票抬头（专票）') {
        name = 'headerDemo'
      }
      this.src = `../../../static/img/demo/${name}.png`
      setTimeout(() => {
        $('#' + currentIndex).click()
      }, 300)
    },
    changeIndex(item) {
      this.currentIndex = item.id
      this.currentName = item.name
    },
    // 保存提交附件的值
    uploadData() {
      this.$emit('uploadAllData', this.dataObject)
    },
    fileChange(id) {
      var Filedata
      var file
      var fileSize
      Filedata = $('#salaryExcel' + id).val()
      if (!Filedata) {
        return
      }
      try {
        file = $('#salaryExcel' + id)[0].files[0]
        fileSize = (file.size / 1024).toFixed(0)
      } catch (e) {
        this.$message({
          message:
            '您的浏览器暂不支持计算上传文件的大小，确保上传文件不要超过5M，建议使用FireFox、Chrome或IE10以上浏览器。',
          type: 'warning',
        })
      }
      // 文件大小和限制类型可以通过子组件传值区分，若不适应于使用页面，可自行判断
      if (this.dataObject[id] && this.dataObject[id].length == 10) {
        this.$message({
          message: '最多上传10个附件',
          type: 'warning',
        })
        $('#salaryExcel' + id).val('')
        return
      }
      if (fileSize / 1 > 1024 * 5) {
        this.$message({
          message: '最多能上传5M以内的附件',
          type: 'warning',
        })
        $('#salaryExcel' + id).val('')
        return
      }
      if (
        !/\.(jpg|png|jpeg|JPG|PNG|JPEG|PDF|doc|docx|xls|xlsx|pdf)$/.test(
          Filedata
        )
      ) {
        this.$message({
          message: `要求格式为png，jpg，jpeg，doc，docx，xls，xlsx，pdf格式，附件大小不超过5M`,
          type: 'warning',
        })
        // this.$refs[refName].value = ''
        $('#salaryExcel' + id).val('')
        return
      }
      let that = this
      var options = {
        url: common.uploadUrl + 'api-f/files/upload',
        type: 'POST',
        dataType: 'json',
        success: function (data) {
          var uploadId = '' + id
          that.$set(that.dataObject, uploadId, that.dataObject[uploadId])
          if (that.dataObject[uploadId] === undefined) {
            that.dataObject[uploadId] = []
          }
          that.dataObject[uploadId].push(data)
          that.getFileLicense(that.dataObject[uploadId], uploadId)
          $('#salaryExcel' + id).val('')
        },
        error: function () {},
      }
      $('#salaryExcelForm' + id).ajaxSubmit(options)
      return false
    },
    changeUpload(status, index) {
      this.fileOptions.forEach((v) => {
        if (v.id == index) {
          v.isUpload = status
          v.prop && (v.error = !status)
        }
      })
      this.$emit('uploadSuccess', this.fileOptions)
    },
    getFileLicense(val, id) {
      if (val && val.length) {
        this.changeUpload(true, id)
      } else {
        this.changeUpload(false, id)
      }
    },
  },
}
</script>
<style lang="less" scoped>
.leftTd {
  width: 160px;
  background: #f8f9fb;
  padding: 20px 32px;
  .text {
    color: #265faa;
    font-weight: 500;
  }
  .index {
    font-size: 40px;
    line-height: 50px;
  }
  .title {
    font-size: 20px;
    margin-top: 10px;
  }
  .desc {
    font-size: 14px;
  }
}
.rightTd {
  width: calc(100% - 160px);
  padding: 20px 15px;
  .inputStyle {
    width: 320px;
  }
  .inputMoneyStyle {
    width: 145px;
  }
  .inputAddressStyle {
    width: 550px;
  }
  .desc {
    font-size: 14px;
    font-weight: 400;
    color: #666666;
  }
  .inlineInp {
    display: inline-block;
  }
}
.lastRightTd {
  // height: 420px;
  padding: 0;
  font-size: 0;
  .titleBox {
    width: 200px;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    border-bottom: none;
    padding: 0;
    margin-bottom: 0;
    .tabTitle {
      width: 100%;
      // height: calc(100% / 10);
      .textBox {
        width: 100%;
        border: 1px solid #dcdfe6;
        border-left: none;
        border-top: none;
        height: 100%;
        // line-height: 100%;
        position: relative;
        padding: 12px 0;

        .nameTextBox {
          text-align: center;
          // padding-top: 11px;
        }
        .nameTextBoxs {
          text-align: center;
          padding-top: 0;
        }
        .mark {
          border-left: 10px solid #46a3ff;
          border-top: 10px solid #46a3ff;
          border-right: 10px solid transparent;
          border-bottom: 10px solid transparent;
          position: absolute;
          top: 0;
          left: 0;
          .right {
            font-size: 12px;
            color: #fff;
            position: absolute;
            top: -12px;
            left: -9px;
            transform: rotateZ(15deg);
          }
        }
        .nameText {
          display: inline-block;
          font-size: 14px;
          line-height: 20px;
          color: #333333;
          font-weight: 400;
          vertical-align: top;
          // position: relative;
          // top: 50%;
          // transform: translateY(-50%);
        }
        .nameTextW {
          width: 140px;
        }
        .noProp {
          // margin-left: 40px;
        }
        .star {
          // width: 40px;
          padding-right: 5px;
          text-align: right;
          font-size: 16px;
          color: #d81e06 !important;
          // transform: translateY(-40%);
        }
        .error {
          color: #d81e06;
          font-size: 12px;
          position: absolute;
          left: 50px;
          bottom: 0;
          margin-left: 12px;
        }
      }
      .textBoxCur {
        border-right: none;
        .nameText {
          color: #48a6ff;
        }
      }
      &:nth-of-type(10) .textBox {
        border-bottom: none !important;
      }
    }
  }
  .fileBox {
    width: calc(100% - 200px);
    height: 100%;
    display: inline-block;
    padding: 24px;
    .fileInfo {
      position: relative;
      p {
        font-size: 16px;
        color: #333333;
        font-weight: 700;
      }
      .demo {
        position: absolute;
        top: 2px;
        left: 120px;
      }
      .demos {
        left: 180px !important;
      }
    }
  }
}
table,
tr,
td,
th,
thead,
tbody {
  border: 1px solid #dcdfe6;
}
.uploadBox {
  position: relative;
  .uploadImg {
    width: 96px;
    height: 36px;
    color: #009588;
    border: 1px solid #009588;
    line-height: 10px;
  }
  .uploadImgState {
    display: block;
    font-size: 14px;
    color: #999999;
    margin-top: 12px;
  }
  .upLoadDom {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    input {
      width: 100px;
      height: 36px;
      cursor: pointer;
    }
  }
}
ul {
  padding-bottom: 24px;
}
.liBox {
  position: relative;
}
.butClass {
  position: absolute;
  right: 70px;
}
.results {
  height: 26px;
  line-height: 26px;
}
.links {
  color: #666;
  display: inline-block;
  vertical-align: middle;
  font-size: 20px;
}
.name {
  width: 200px;
  display: inline-block;
  font-size: 14px;
  color: #333;
  margin-left: 15px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.nameSty {
  width: 360px !important;
}
.look {
  margin-left: 15px;
  display: inline-block;
  vertical-align: middle;
}
.previewBox {
  display: inline-block;
  // width: 56px;
  // height: 20px;
  position: relative;
  margin-left: 15px;
  .previewImg {
    position: absolute;
    top: 25px;
    left: 0;
    cursor: pointer;
    /deep/.el-image__preview {
      opacity: 1;
    }
  }
  /deep/.el-upload-list {
    display: none;
  }
}
</style>
